M

MLOG

Latviešu

Apgūstiet CSS View Transitions API, lai radītu plūstošas un saistošas lapu pārejas. Uzlabojiet lietotāja pieredzi un veiktspēju ar gludām animācijām.

Lietotāja pieredzes uzlabošana: visaptverošs ceļvedis CSS View Transitions API

Mūsdienu dinamiskajā tīmekļa vidē lietotāja pieredze (UX) ir vissvarīgākā. Nevainojama navigācija un saistoša mijiedarbība ir atslēga, lai lietotāji būtu apmierināti un atgrieztos atkal. Viens spēcīgs rīks, lai to panāktu, ir CSS View Transitions API – salīdzinoši jauna pārlūkprogrammas funkcija, kas ļauj izstrādātājiem radīt plūstošas un vizuāli pievilcīgas pārejas starp dažādiem stāvokļiem vai lapām tīmekļa lietojumprogrammā.

Kas ir CSS View Transitions API?

CSS View Transitions API nodrošina standartizētu veidu, kā animēt vizuālās izmaiņas, kas notiek, pārvietojoties starp dažādiem stāvokļiem tīmekļa lietojumprogrammā. Iztēlojieties to kā veidu, kā organizēt plūstošus izgaismojumus, slīdējumus un citus vizuālos efektus, kad saturs tiek atjaunināts ekrānā. Pirms šī API izstrādātāji bieži paļāvās uz JavaScript bibliotēkām un sarežģītām CSS animācijām, lai sasniegtu līdzīgus efektus, kas varēja būt apgrūtinoši un izraisīt veiktspējas problēmas. View Transitions API piedāvā racionalizētāku un veiktspējīgāku pieeju.

API pamatideja ir notvert DOM (Document Object Model) “pirms” un “pēc” stāvokļus un pēc tam animēt atšķirības starp tiem. Pārlūkprogramma veic smago darbu, radot animāciju, atbrīvojot izstrādātājus no nepieciešamības manuāli rakstīt sarežģītu animācijas kodu. Tas ne tikai vienkāršo izstrādes procesu, bet arī palīdz nodrošināt plūstošākas un veiktspējīgākas pārejas.

Kāpēc izmantot CSS View Transitions API?

Kā tas darbojas?

CSS View Transitions API galvenokārt ietver vienu JavaScript funkciju: `document.startViewTransition()`. Šī funkcija kā argumentu pieņem atzvanīšanas funkciju. Šajā atzvanīšanas funkcijā jūs veicat DOM atjauninājumus, kas atspoguļo pāreju starp skatiem. Pārlūkprogramma automātiski notver DOM “pirms” un “pēc” stāvokļus un izveido pārejas animāciju.

Šeit ir vienkāršots piemērs:


  function updateContent(newContent) {
    document.startViewTransition(() => {
      // Atjaunināt DOM ar jauno saturu
      document.querySelector('#content').innerHTML = newContent;
    });
  }

Aplūkosim šo kodu sīkāk:

  1. `updateContent(newContent)`: Šī funkcija kā argumentu pieņem jauno saturu, kas jāattēlo.
  2. `document.startViewTransition(() => { ... });`: Šis ir API kodols. Tas paziņo pārlūkprogrammai sākt skata pāreju. Tiek izpildīta funkcija, kas tiek nodota kā arguments `startViewTransition`.
  3. `document.querySelector('#content').innerHTML = newContent;`: Atzvanīšanas funkcijā jūs atjaunināt DOM ar jauno saturu. Šī ir vieta, kur jūs veicat izmaiņas lapā, kuras vēlaties animēt.

Pārlūkprogramma parūpējas par pārējo. Tā notver DOM stāvokli pirms un pēc `innerHTML` atjaunināšanas un izveido plūstošu pāreju starp abiem stāvokļiem.

Pamata ieviešanas piemērs

Šeit ir pilnīgāks piemērs ar HTML, CSS un JavaScript:

HTML (index.html):





  
  
  View Transitions Demo
  


  

  

    
Sākums

    
Laipni lūdzam sākumlapā!

CSS (style.css):


body {
  font-family: sans-serif;
  margin: 20px;
}

nav {
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #3e8e41;
}

/* Stili pārejošiem elementiem */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation-name: fadeOut;
}

::view-transition-new(root) {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

JavaScript (script.js):


const contentDiv = document.getElementById('content');
const navButtons = document.querySelectorAll('nav button');

const pages = {
  home: '
Sākums
Laipni lūdzam sākumlapā!
',
  about: '
Par mums
Uzziniet vairāk par mums.
',
  contact: '
Kontakti
Sazinieties ar mums.
',
};

function updateContent(target) {
  document.startViewTransition(() => {
    contentDiv.innerHTML = pages[target];
    document.documentElement.scrollTop = 0; // Atiestatīt ritināšanas pozīciju
  });
}

navButtons.forEach(button => {
  button.addEventListener('click', (event) => {
    const target = event.target.dataset.target;
    updateContent(target);
  });
});

Šajā piemērā, noklikšķinot uz navigācijas pogām, tiek aktivizēta izgaismošanas pāreja, kamēr saturs tiek atjaunināts. CSS definē `fadeIn` un `fadeOut` animācijas, un JavaScript izmanto `document.startViewTransition`, lai organizētu pāreju.

Papildu tehnikas un pielāgošana

CSS View Transitions API piedāvā vairākas papildu funkcijas pāreju pielāgošanai:

1. Nosauktās pārejas

Jūs varat piešķirt nosaukumus konkrētiem elementiem, lai izveidotu mērķtiecīgākas pārejas. Piemēram, jūs varētu vēlēties, lai konkrēts attēls plūstoši pārietu no vienas vietas uz otru, pārvietojoties starp lapām.

HTML:


Attēls 1

CSS:


::view-transition-group(hero-image) {
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
}

Šis kods piešķir attēlam nosaukumu `hero-image`. CSS pēc tam atlasa šo konkrēto pārejas grupu, lai piemērotu pielāgotu animāciju. `::view-transition-group()` pseidoelements ļauj stilizēt konkrētus pārejošos elementus.

2. `view-transition-name` īpašība

Šī CSS īpašība ļauj piešķirt nosaukumu elementam, kas piedalīsies skata pārejā. Kad diviem elementiem dažādās lapās ir vienāds `view-transition-name`, pārlūkprogramma mēģinās izveidot plūstošu pāreju starp tiem. Tas ir īpaši noderīgi, veidojot koplietojamu elementu pārejas, kur šķiet, ka elements nemanāmi pārvietojas no vienas lapas uz otru.

3. JavaScript vadība

Lai gan API galvenokārt vada CSS, jūs varat izmantot arī JavaScript, lai kontrolētu pārejas procesu. Piemēram, jūs varat klausīties `view-transition-ready` notikumu, lai veiktu darbības pirms pārejas sākuma, vai `view-transition-finished` notikumu, lai izpildītu kodu pēc pārejas pabeigšanas.


document.startViewTransition(() => {
  // Atjaunināt DOM
  return Promise.resolve(); // Neobligāti: atgriezt solījumu
}).then((transition) => {
  transition.finished.then(() => {
    // Pāreja pabeigta
    console.log('Pāreja pabeigta!');
  });
});

`transition.finished` īpašība atgriež solījumu (promise), kas tiek izpildīts, kad pāreja ir pabeigta. Tas ļauj veikt darbības, piemēram, ielādēt papildu saturu vai atjaunināt lietotāja saskarni pēc animācijas beigām.

4. Asinhronu operāciju apstrāde

Veicot DOM atjauninājumus `document.startViewTransition()` atzvanīšanas funkcijā, jūs varat atgriezt solījumu (Promise), lai nodrošinātu, ka pāreja nesākas, kamēr nav pabeigta asinhronā operācija. Tas ir noderīgi scenārijos, kur pirms lietotāja saskarnes atjaunināšanas ir nepieciešams iegūt datus no API.


function updateContent(newContent) {
  document.startViewTransition(() => {
    return fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // Atjaunināt DOM ar iegūtajiem datiem
        document.querySelector('#content').innerHTML = data.content;
      });
  });
}

5. Pielāgotas CSS pārejas

View Transitions API patiesais spēks slēpjas spējā pielāgot pārejas ar CSS. Jūs varat izmantot CSS animācijas un pārejas, lai izveidotu plašu efektu klāstu, piemēram, izgaismošanu, slīdēšanu, tālummaiņu un daudz ko citu. Eksperimentējiet ar dažādām CSS īpašībām, lai sasniegtu vēlamo vizuālo efektu.

CSS:


::view-transition-old(root) {
  animation: slideOut 0.5s ease-in-out forwards;
}

::view-transition-new(root) {
  animation: slideIn 0.5s ease-in-out forwards;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

Šis piemērs izveido slīdošas pārejas efektu.

Pārlūkprogrammu saderība un polifili

CSS View Transitions API ir salīdzinoši jauna funkcija, tāpēc pārlūkprogrammu atbalsts joprojām attīstās. Uz 2023. gada beigām Chrome un Edge ir labs atbalsts. Firefox un Safari strādā pie tās ieviešanas. Pirms API izmantošanas ražošanā ir svarīgi pārbaudīt pašreizējo pārlūkprogrammu saderību un apsvērt polifila (polyfill) izmantošanu vecākām pārlūkprogrammām. Polifils ir JavaScript koda daļa, kas nodrošina jaunākas funkcijas funkcionalitāti vecākās pārlūkprogrammās, kuras to dabiski neatbalsta.

Jūs varat izmantot polifilu, piemēram, šo GitHub, lai nodrošinātu atbalstu pārlūkprogrammām, kurām vēl nav vietējā atbalsta. Atcerieties rūpīgi pārbaudīt savu lietojumprogrammu dažādās pārlūkprogrammās, lai nodrošinātu konsekventu lietotāja pieredzi.

Labākās prakses un apsvērumi

Lietošanas gadījumi un piemēri

CSS View Transitions API var izmantot dažādos scenārijos, lai uzlabotu lietotāja pieredzi:

Globālie apsvērumi

Ieviešot View Transitions API globāli pieejamā tīmekļa vietnē, ņemiet vērā sekojošo:

Noslēgums

The CSS View Transitions API ir spēcīgs rīks lietotāja pieredzes uzlabošanai un saistošāku tīmekļa lietojumprogrammu izveidei. Vienkāršojot plūstošu un vizuāli pievilcīgu pāreju izveides procesu, API ļauj izstrādātājiem koncentrēties uz labākas kopējās pieredzes nodrošināšanu saviem lietotājiem. Lai gan pārlūkprogrammu atbalsts joprojām attīstās, View Transitions API potenciālie ieguvumi ir skaidri. Tā kā API kļūst arvien plašāk pieņemta, tā, visticamāk, kļūs par būtisku rīku front-end izstrādātāja instrumentu komplektā. Pieņemiet šo jauno tehnoloģiju un paceliet savas tīmekļa lietojumprogrammas nākamajā līmenī.

Izprotot šajā rokasgrāmatā izklāstītos jēdzienus un tehnikas, jūs varat sākt izmantot CSS View Transitions API, lai izveidotu noslīpētākas un saistošākas tīmekļa lietojumprogrammas. Eksperimentējiet ar dažādām pārejām, pielāgojiet tās savām specifiskajām vajadzībām un vienmēr piešķiriet prioritāti lietotāja pieredzei un pieejamībai. View Transitions API ir spēcīgs rīks, kas var palīdzēt jums izveidot tīmekļa lietojumprogrammas, kas ir gan vizuāli pievilcīgas, gan ļoti funkcionālas.